<template>
    <div class="face-login-container">
        <span style="font-weight: 800;font-size: 40px;color: rgba(24,24,24,0.85)">人脸登录</span><router-link to="/login" style="color: rgba(0,0,0,0.5)">返回密码登录</router-link
    >
        <video ref="video" width="640" height="480" autoplay playsinline style="border-radius: 30px"></video>
        <canvas ref="canvas" width="640" height="480" style="display: none;"></canvas>
        <el-button @click="upFaceImg" type="primary" size="mini">&nbsp;&nbsp;登录</el-button>
    </div>
</template>

<script>
    export default {
        name: "FaceLogin",
        data(){
            return{
                login: {
                    password: "",
                    username:'',
                },
            }
        },
        mounted() {
            this.startCamera();
        },
        methods: {
            startCamera() {
                const video = this.$refs.video;
                if (navigator.mediaDevices.getUserMedia) {
                    navigator.mediaDevices
                        .getUserMedia({ video: true })
                        .then((stream) => {
                            video.srcObject = stream;
                        })
                        .catch((error) => {
                            console.error("无法访问摄像头:", error);
                        });
                }
            },
            upFaceImg() {
                const video = this.$refs.video;
                const canvas = this.$refs.canvas;
                const ctx = canvas.getContext("2d");
                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                // 将 canvas 内容转换为 Blob 对象
                canvas.toBlob((blob) => {
                    const formData = new FormData();
                    formData.append("image", blob, "face_image.jpg");

                    // 发送文件到后端
                    fetch("http://127.0.0.1:5000/face_identify", {
                        method: "POST",
                        body: formData
                    })
                        .then((response) => response.json())
                        .then((data) => {
                            console.log(data);
                            if (data.name==='UnKnow'){
                                this.$message.warning("沒有此人")
                            }else{
                                this.login.username=data.name;
                                this.login.password="11223344";
                                this.loginBtn();
                            }
                        })
                        .catch((error) => {
                            console.error(error);
                        });
                }, "image/jpeg");
            },
            loginBtn() {
                this.axios
                    .post("http://localhost:9151/user/login", {
                        userName: this.login.username,
                        password: this.login.password,
                    })
                    .then((res) => {
                        if (res.data.code == 200) {
                            this.iconstyle = "el-icon-check";
                            this.btnType = "success";
                            this.$message({
                                message: "{"+this.login.username+"}登录成功，正在跳转",
                                type: "success",
                            });
                            setTimeout(() => {
                                this.disabled = false;
                                this.$store.commit("setFind");
                                this.$router.push("/findroom");
                            }, 2000);
                        } else {
                            this.iconstyle = "el-icon-close";
                            this.btnType = "danger";
                            this.$message({
                                message: "登录失败，账号或密码错误",
                                type: "error",
                            });
                            setTimeout(() => {
                                this.disabled = false;
                                this.iconstyle = "iconfont icon-r-right";
                                this.btnType = "primary";
                            }, 2000);
                        }
                    })
                    .catch((e) => {
                        this.iconstyle = "el-icon-close";
                        this.btnType = "danger";
                        setTimeout(() => {
                            this.disabled = false;
                            this.iconstyle = "iconfont icon-r-right";
                            this.btnType = "primary";
                        }, 2000);

                        if (e.response == undefined || e.response.data == undefined) {
                            this.$message({
                                showClose: true,
                                message: e,
                                type: "error",
                                duration: 0,
                            });
                        } else {
                            this.$message({
                                showClose: true,
                                message: e.response.data,
                                type: "error",
                                duration: 0,
                            });
                        }
                    });
            },
        },
    };
</script>

<style scoped>
    .face-login-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: rgba(176,196,222, 1);
    }

    h1 {
        margin-bottom: 20px;
        color: #333;
    }

    video {
        border: 1px solid #ccc;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }

    button {
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
    }

    button:hover {
        background-color: #0056b3;
    }
</style>
